<template>
  <div class="login">
    <!-- 滑块验证模块 -->
    <div class="slideShadow" v-show="showSlide">
      <transition>
        <div class="slideSty animated bounce">
          <slide-verify
            @success="onSuccess"
            @fail="onFail"
            :w="350"
            :h="175"
            ref="slideDiv"
            :sliderText="text"
          ></slide-verify>
          <div class="iconBtn">
            <i class="el-icon-circle-close" @click="showSlide = false"></i
            ><i class="el-icon-refresh" @click="refresh"></i>
          </div>
        </div>
      </transition>
    </div>
    <!-- 登录盒子 -->
    <div class="login-box">
      <div class="title">HROWS后台管理系统</div>
      <el-card>
        <div class="showTitle">管理员登录</div>
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
          <el-form-item label="用户名：" prop="userName">
            <el-input clearable v-model="loginForm.userName">
              <i slot="prefix" class="iconfont icon-icon"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input
              type="password"
              clearable
              v-model="loginForm.password"
              show-password
            >
              <i slot="prefix" class="iconfont icon-lock"></i>
            </el-input>
          </el-form-item>
        </el-form>
        <div class="btn">
          <el-button type="primary" @click="toLogin">登录</el-button>
          <el-button type="success" @click="resetForm">重置</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import SlideVerify from "./component/SlideVerify.vue"
export default {
  data() {
    return {
      // 登录表格
      loginForm: {
        userName: "",
        password: ""
      },
      // 表格验证规则
      loginFormRules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          { min: 6, max: 15, message: "长度在 6 到 15 个字符", trigger: "blur" }
        ]
      },
      notifyObj: null,
      showSlide: false,
      text: "向右滑动",
    }
  },
  mounted() {
    this.shopTip()
  },
  methods: {
    onSuccess() {
      this.showSlide = false
      this.login()
    },
    onFail() {
      this.$message.error("验证失败")
    },
    refresh() {
      this.$refs.slideDiv.reset()
    },
    // 点击登录
    toLogin() {
      // 表单预验证
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        this.showSlide = true
      })
      
    },
    // 验证通过
    async login() {
        // 发起登录请求
        const { data: res } = await this.$http.post("manager/login", {
          managerAN: this.loginForm.userName,
          managerPwd: this.loginForm.password
        })
        if (res == 0) return this.$message.error("账号或密码错误")
        // 跳转
        window.localStorage.setItem("userStatus", res)
        this.$router.push("/admin/home")
    },
    // 重置表单
    resetForm() {
      this.$refs.loginFormRef.resetFields()
    },
    // 提示框（通过createelement创建，notifyObj为一个对象）
    shopTip() {
      this.notifyObj = this.$notify({
        title: "提示",
        message: "欢迎使用来到HROWS后台管理系统，账号为admin 密码为 123456",
        duration: 5500,
        iconClass: "el-icon-s-opportunity"
      })
    }
  },
  components: {
    SlideVerify
  }
}
</script>
<style lang="less" scoped>
.login {
  height: 100%;
  width: 100%;
  // 背景图片
  background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591341033324&di=5bc345ad7b9303cc3cb53b36f276cf78&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fe%2F589a89c9901ef.jpg")
    no-repeat center center;
  background-size: 100% 100%;
  overflow: hidden;
}
.login-box {
  width: 400px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 25px 20px 25px;
  .title {
    color: #fff;
    font-size: 26px;
    text-align: center;
    margin-bottom: 20px;
    width: 100%;
  }
  .el-card {
    height: 400px;
    border-radius: 10px;
    border-top: 4px solid #409eff;
    .showTitle {
      text-align: center;
      color: rgb(96, 98, 122);
      font-size: 18px;
      margin: 20px 0 25px 0;
    }
    .el-form {
      margin-top: 15px;
    }
    .btn {
      width: 100%;
      text-align: center;
      margin-top: 48px;
      display: flex;
      .el-button {
        height: 40px;
        flex: 1;
        border-radius: 8px;
        border: none;
      }
    }
  }
}
.slideShadow {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}
.slideSty {
  position: absolute;
  width: 380px;
  height: 311px;
  background: #fff;
  border: 1px solid #dcdcdc;
  left: 50%;
  top: 50%;
  margin-left: -188px;
  margin-top: -176px;
  z-index: 99;
  border-radius: 5px;
}
.iconBtn {
  padding: 9px 0 0 19px;
  color: #5f5f5f;
  border-top: 1px solid #d8d8d8;
  margin-top: 17px;
  i {
    font-size: 22px;
    cursor: pointer;
  }
  i:last-child {
    margin-left: 7px;
  }
}
</style>
<style>
.slideSty .slide-verify {
  margin: 13px auto 0 auto;
  width: 350px !important;
}
.slideSty .slide-verify-slider {
  width: 100% !important;
}
.slideSty .slide-verify-refresh-icon {
  display: none;
}
</style>